<template>
  <div class="app-main-container">
    <div class="mb20">
      <el-button type="primary" @click="handleEdit()">新增服务器</el-button>
    </div>
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="服务器名称"
        prop="name"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="服务器类型"
        prop="id"
        min-width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.type == '0'">应用服务器</span>
          <span v-if="scope.row.type == '1'">转发服务器</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="服务器IP"
        prop="ip"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="Nginx转发地址"
        prop="proxyUrl"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="备注"
        prop="info"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        fixed="right"
        label="状态"
        min-width="80"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.status == '0'">未启用</span>
          <span v-if="scope.row.status == '1'">启用</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" class="red" @click="handleDel(scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />

    <el-dialog
      :title="param.id ? '编辑服务器' : '新增服务器'"
      :visible.sync="isShowModel"
      :before-close="handleClose"
      width="600px"
    >
      <el-form
        ref="form"
        :model="param"
        :rules="rules"
        label-suffix="："
        label-width="140px"
      >
        <el-form-item label="服务器名称" prop="name">
          <el-input v-model="param.name" />
        </el-form-item>
        <el-form-item label="服务器类型" prop="type">
          <el-select v-model="param.type">
            <el-option label="应用服务器" value="0" />
            <el-option label="转发服务器" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="服务器IP" prop="ip">
          <el-input v-model="param.ip" />
        </el-form-item>
        <el-form-item label="Nginx转发地址" prop="proxyUrl">
          <el-input v-model="param.proxyUrl" />
        </el-form-item>
        <el-form-item label="服务器权重" prop="weight">
          <el-input-number
            v-model="param.weight"
            :min="1"
            :step="1"
            step-strictly
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="param.status"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="备注" prop="info">
          <el-input
            v-model="param.info"
            type="textarea"
            :rows="4"
            :maxlength="50"
            show-word-limit
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button :loading="subLoading" type="primary" @click="onSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  grayServerList,
  grayServerAdd,
  grayServerUpdate,
  grayServerDel
} from '@/api'
export default {
  data() {
    return {
      pagination: {
        page: 1,
        rows: 10
      },
      meta: [],
      list: [],
      totalCount: 10,

      isShowModel: false,
      param: {
        status: '0'
      },
      subLoading: false,
      rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        ip: [{ required: true, message: '请输入', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        weight: [{ required: true, message: '请输入', trigger: 'blur' }],
        proxyUrl: [{ required: true, message: '请输入', trigger: 'blur' }],
        status: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  activated() {

  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { param } = this
          this.subLoading = true
          const fn = param.id ? grayServerUpdate : grayServerAdd
          fn({ param }).then(res => {
            this.subLoading = false
            this.isShowModel = false
            this.$message.success('服务器保存成功')
            this.getList()
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    getList(page) {
      const { pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      grayServerList({
        pagination,
        param: {}
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.totalCount = res.totalCount
          }
        })
    },
    handleEdit(row) {
      if (row && row.id) {
        this.param = { ...row }
      } else {
        this.param = {
          status: '0'
        }
      }

      this.isShowModel = true
    },
    handleDel(row) {
      this.$confirm('此时将删除次服务器，是非继续此操作？', '确定要离开?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        grayServerDel({ param: { id: row.id } }).then(res => {
          this.getList()
          this.$message.success('删除成功')
        })
      })
    },
    handleClose() {
      this.isShowModel = false
    },
    clear() {
      this.getList(1)
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    }
  }
}
</script>

<style>
</style>
